<template>
	<view class="Mask-layer" v-if="show">
		<!-- 弹窗内容 -->
		<view class="modal-container" @tap.stop>
			<view class="modal-content">
				<!-- 主界面：成功/失败状态 -->
				<template v-if="!showDetailMode">
					<text :style="{ color: title === '通关失败' ? '#808080' : '#fc2929' }" class="title">{{ title }}</text>
					<image :src="imageUrl" mode="widthFix" style="width: 90rpx;"></image>
					<!-- 弹窗提示词 -->
					<view class="promptTextContainer">
						<text class="promptText">{{ content }}</text>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 80%;margin: 5rpx;">
						<text class="keepOn-detail" @click="showDetail" style="flex:1; text-align:left;">查看详情</text>
						<text class="keepOn" @click="close" style="flex:1; text-align:right;">点击此处继续</text>
					</view>
				</template>

				<!-- 详情界面 -->
				<template v-else>
					<text class="title" style="color: #333;">关卡详情</text>
					<scroll-view class="detailTextContainer" scroll-y show-scrollbar="true">
						<text class="detailText">{{ detailContent || '暂无详细信息' }}</text>
					</scroll-view>
					<view style="margin: 10rpx;">
						<text @click="backToMain">返回</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	defineProps,
	defineEmits,
	ref
} from 'vue'
const props = defineProps({
	show: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: '通关成功'
	},
	imageUrl: {
		type: String
	},
	content: {
		type: String
	},
	detailContent: {
		type: String,
		default: ''
	}

})

const emits = defineEmits(['update:show', 'success', 'failure']) // 新增failure事件

// 控制是否显示详情
const showDetailMode = ref(false)

const close = () => {
	emits('update:show', false)
	// 根据标题触发不同事件
	if (props.title === '通关成功') {
		emits('success')
	} else {
		emits('failure')
	}
}

// 查看关卡详情介绍
const showDetail = () => {
	showDetailMode.value = true
}

// 返回主界面
const backToMain = () => {
	showDetailMode.value = false
}
</script>

<style scoped>
.Mask-layer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(245, 245, 245, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	/* 新增滚动锁定 */
	touch-action: none;
	overflow: hidden;
}

.modal-container {
	width: 350rpx;
	background-color: #c98f5d;
	border-radius: 10rpx;
	padding: 15rpx;
	border: #804118 5px solid;
}

.modal-content {
	display: flex;
	flex-direction: column;
	border: black 3rpx solid;
	text-align: center;
	border-radius: 50rpx;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5),
		0px -5px 10px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	background-color: #f3fcf2;
	align-items: center;
	justify-content: center;
	height: 250rpx;
}

.promptText {
	font-weight: bold;
	font-size: 16rpx;
	white-space: pre-wrap;
	/* 保留空白符序列，正常进行换行 */
	word-wrap: break-word;
	/* 允许长单词或 URL 地址换行到下一行 */
	word-break: break-all;
	/* 允许在单词内换行 */
}

.title {
	font-size: 36rpx;
	font-weight: bold;
}

.keepOn {
	color: #5c5d5c;
	font-weight: bold;
}

.keepOn-detail {
	color: #5c5d5c;
	font-weight: bold;
}


.promptTextContainer {
	width: 230rpx;
	text-align: justify;
	/* 两端对齐 */
	text-justify: inter-ideograph;
	/* 针对中文文本的两端对齐优化 */
}

.detailTextContainer {
	width: 280rpx;
	height: 150rpx;
	text-align: justify;
	text-justify: inter-ideograph;
	padding: 10rpx;
}

.detailText {
	font-size: 14rpx;
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word;
	word-break: break-all;
}
</style>